<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	canvas{
		margin: 0 auto;
		display: block;
		border: 2px solid blue;
	}
	</style>
</head>
<body>
	<canvas id="canvas"	width="900" height="1600">
	您的浏览器不支持canvas
	</canvas>
</body>
<script>

var canvas = document.querySelector("#canvas");
var line = canvas.getContext("2d");
	line.strokeStyle = "blue";
	
	// 三角
	line.moveTo(200,200);
	line.lineTo(400,200);
	line.lineTo(300,300);
	line.lineTo(200,200);
	


	// 四边形
	line.strokeStyle = "green";
	line.moveTo(200,400);
	line.lineTo(400,400);
	line.lineTo(400,600);
	line.lineTo(200,600);
	line.lineTo(200,400);

	// 五角星
	line.moveTo(200,800);
	line.lineTo(700,800);
	line.lineTo(287,1204);
	line.lineTo(450,600);
	line.lineTo(737,1204)
	line.lineTo(200,800);
	line.stroke();


</script>
</html>